<template>
    <div class="left-bar-view">
        <el-menu :default-active="defaultActive" router>
            <div v-for="navicate in navicateList">
                <el-sub-menu v-if="navicate?.children && navicate?.children?.length > 0" :index="navicate.path">
                    <template #title>
                        <el-icon>
                            <component :is="navicate.meta.icon" />
                        </el-icon>
                        <span>{{ navicate.meta.title }}</span>
                    </template>
                    <el-menu-item v-for="child in navicate.children" :index="child.path">
                        <el-icon>
                            <component :is="child.meta.icon" />
                        </el-icon>
                        <span>{{ child.meta.title }}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="navicate.path">
                    <el-icon>
                        <component :is="navicate.meta.icon" />
                    </el-icon>
                    <span>{{ navicate.meta.title }}</span>
                </el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
let defaultActive = ref(route.path);
let navicateList = ref([]);

const init = () => {
    navicateList.value = JSON.parse(localStorage.getItem("navicateList"));
}

onMounted(() => {
    init();
});
</script>

<style scoped>
.left-bar-view {
    width: 100%;
    height: 100%;
    user-select: none;
}
</style>
